<template>
  <view class="container">
    <!-- 状态卡片 -->
    <status-card
      :is-running="isRunning"
      :status="status"
      :countdown="countdown"
      :stats="plunderStats"
    />

    <!-- 控制面板 -->
    <view class="control-panel">
      <view class="panel-header">
        <text class="panel-title">控制面板</text>
        <view class="button-group">
          <button 
            class="control-button" 
            :class="{ 'button-primary': !isRunning, 'button-danger': isRunning }"
            @click="isRunning ? stopPlunder() : startPlunder()"
          >
            <text class="button-icon">{{ isRunning ? '⏹' : '▶' }}</text>
            {{ isRunning ? '停止' : '启动' }}
          </button>
        </view>
      </view>

      <!-- 配置表单 -->
      <config-form
        :is-running="isRunning"
        :initial-config="config"
        @update:config="updateConfig"
        @import="importNicknames"
        @clear="clearNicknames"
      />
    </view>

    <!-- 日志面板 -->
    <log-panel
      :logs="logs"
      :scroll-to="scrollTo"
      @clear="clearLog"
    />

    <!-- 统计面板 -->
    <stats-panel
      :stats="plunderStats"
      @export="exportStats"
    />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import StatusCard from '@/components/StatusCard.vue';
import ConfigForm from '@/components/ConfigForm.vue';
import LogPanel from '@/components/LogPanel.vue';
import StatsPanel from '@/components/StatsPanel.vue';

// 常量定义
const BASE_URL = 'https://farm-api.lucklyworld.com';
const PREPARE_API = '/v8/api/game/bead/plunder/attack/prepare';
const ATTACK_API = '/v8/api/game/bead/plunder/attack/start';
const MAX_LOG_LINES = 1000;
const MAX_RECORDS = 100;
const RETRY_ATTEMPTS = 5;
const LOG_CLEANUP_INTERVAL = 3600000;
const LOG_MAX_AGE = 86400000;
const ENCRYPTION_KEY = 'your-secret-key';
const RATE_LIMIT = {
  prepare: { maxRequests: 10, timeWindow: 60000 },
  attack: { maxRequests: 5, timeWindow: 60000 }
};

// 状态管理
const isRunning = ref(false);
const status = ref('已停止');
const countdown = ref('N/A');
const logs = ref([]);
const scrollTo = ref('');
const logSaveTimeout = ref(null);
const config = ref({
  nicknames: [],
  uid: '',
  roleId: '',
  token: '',
  threshold: '168.0'
});
const plunderStats = ref({
  totalAttempts: 0,
  successfulPlunders: 0,
  totalStones: 0.0,
  records: [],
  nicknameStats: {}
});

// 计算属性
const successRate = computed(() => {
  return plunderStats.value.totalAttempts > 0
    ? ((plunderStats.value.successfulPlunders / plunderStats.value.totalAttempts) * 100).toFixed(2)
    : '0.00';
});

// 配置更新
const updateConfig = (newConfig) => {
  config.value = newConfig;
  saveConfig();
};

// 其他方法保持不变...
// (保留原有的所有方法，包括 loadConfig, saveConfig, log, cleanupLogs 等)

// 初始化
onMounted(() => {
  loadConfig();
  
  // 定期更新倒计时
  setInterval(() => {
    if (isRunning.value) {
      secondsToNextFiveMinute();
    }
  }, 1000);
  
  // 定期清理日志
  setInterval(cleanupLogs, LOG_CLEANUP_INTERVAL);
  
  // 初始清理一次日志
  cleanupLogs();
});
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.control-panel {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.panel-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
}

.button-group {
  display: flex;
  gap: 16rpx;
}

.control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
}

.button-icon {
  margin-right: 8rpx;
  font-size: 32rpx;
}

.button-primary {
  background-color: #2196f3;
  color: white;
}

.button-primary:active {
  background-color: #1976d2;
}

.button-danger {
  background-color: #f44336;
  color: white;
}

.button-danger:active {
  background-color: #d32f2f;
}

@media screen and (min-width: 768px) {
  .container {
    max-width: 1200rpx;
    margin: 0 auto;
  }
}
</style> 